<template>
  <el-form :model="addForm" label-width="90px" label-suffix=":" :show-message="false" :rules="addFormRules" ref="addForm">
    <el-row>
      <el-col :span="6">
        <el-form-item label="故事类型" prop="storyType">
          <el-select clearable v-model="addForm.storyType" placeholder="故事类型">
            <el-option v-for="item in dict['故事类型']" :key="item.index" :value="item.value" :label="item.text" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="门店" prop="storeId">
          <job-shop v-model="addForm.storeId" defaultStoreId />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="品牌" prop="carBrandId">
          <el-select clearable v-model="addForm.carBrandId" placeholder="品牌" filterable @change="brandChangeHandle">
            <el-option v-for="item in brandList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车系">
          <el-select clearable v-model="addForm.styleId" placeholder="车系" filterable>
            <el-option v-for="item in vehicleList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="12">
        <el-form-item label="故事标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入故事标题" />
        </el-form-item>
        <el-form-item label="故事摘要" prop="excerpt">
          <el-input v-model="addForm.excerpt" type="textarea" :rows="4" placeholder="请输入故事摘要" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="封面" prop="cover">
          <upload-img v-model="addForm.cover" image-style="width:200px;height:150px;"/>
        </el-form-item>
      </el-col>
    </el-row> -->
    <el-form-item label="故事描述" prop="content">
       <tinymce v-model="addForm.content" editor-image-vist :height="500" />
    </el-form-item>
    <el-row>
      <el-col :span="24" align="center">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { JobShop } from '@/components/index'
  import UploadImg from '@/components/UploadImage/index.vue'
  import Tinymce from '@/components/Tinymce'
  import { getDict } from '@/utils'
  import {
    getAllBrand,
    getSeries
  } from '@/api/after-sale/systemManage/carModel'

  export default {
    components: { JobShop, Tinymce, UploadImg },
    props: {
      editData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      const addForm = {
        // title: '', // 标题
        // cover: '', // 封面
        // excerpt: '', // 摘要
        storeId: '', // 门店
        storyType: '', // 故事类型
        carBrandId: '', // 品牌
        styleId: '', // 车系
        content: '' // 内容
      }
      if (this.editData) {
        Object.keys(addForm).forEach(key => {
          addForm[key] = this.editData[key]
        })
      }

      return {
        addForm,
        addFormRules: {
          storeId: [{ required: true, message: '请选择门店' }],
          storyType: [{ required: true, message: '请选择故事类型' }],
          carBrandId: [{ required: true, message: '请选择品牌' }],
          styleId: [{ required: true, message: '请选择车系' }]
          // title: [{ required: true, message: '请输入标题' }],
          // cover: [{ required: true, message: '请上传封面' }],
          // excerpt: [{ required: true, message: '请输入摘要' }]
        },
        brandList: [],
        vehicleList: []
      }
    },
    async created() {
      this.dict = getDict(['故事类型'])
    },
    methods: {
      onSubmit() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            const data = { ...this.addForm }
            if (this.editData) {
              data.id = this.editData.id
            }

            this.$emit('operate', data, data.id ? 'update' : 'add')
          }
        })
      },
      brandChangeHandle(carBrandId) {
        const addForm = this.addForm
        addForm.styleId = ''

        this.vehicleList = []

        this.requestVehicleList(carBrandId)
      },
      // 请求品牌
      requestCarBrandList() {
        getAllBrand().then(({ success, data }) => {
          if (success) {
            this.brandList = data || []
          }
        })
      },
      // 请求车系
      requestVehicleList(brandId) {
        getSeries(brandId).then(({ success, data }) => {
          if (success) {
            this.vehicleList = data || []
          }
        })
      }
    },
    mounted() {
      this.requestCarBrandList()
      if (this.editData) {
        this.requestVehicleList(this.editData.carBrandId)
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

